<template>
	<n-upload
		accept="image/*"
		action="/api/resource/oss/upload"
		:max="1"
		list-type="image"
		:headers="{ authorization: `Bearer ${accountStore.token}` }"
		response-type="json"
		@finish="onFinish"
		@remove="onRemove">
		<n-upload-dragger
			class="mt-4 h-[200px] rounded-lg border border-dashed border-border-2 flex justify-center items-center bg-bg-1 cursor-pointer">
			<div class="flex flex-col items-center w-[285px] h-[160px] rounded-lg bg-bg-3 pt-[46px]">
				<base-image src="kyc/camera" />
				<div class="mt-1">
					<BaseText :text="title" :textT="titleT" />
					<span class="text-danger">*</span>
				</div>
				<div class="mt-[30px] text-sm text-t-3">{{ $t('set.kyc.id.imgLimit') }}</div>
			</div>
		</n-upload-dragger>
	</n-upload>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { NUpload, NUploadDragger } from 'naive-ui'
import { BaseImage, BaseText } from '@/components/base'
import { useAccountStore } from '@/store'

defineProps({
	url: { type: String },
	title: { type: [String, Number] },
	titleT: { type: [String, Array] }
})
const emits = defineEmits(['update:url'])
const accountStore = useAccountStore()
const result = reactive({
	url: '',
	fileName: '',
	ossId: ''
})

const onFinish = (options: any) => {
	const data = options.event.target?.response?.data
	if (data) {
		Object.assign(result, data)
		emits('update:url', data?.url)
	}
}

const onRemove = async () => {
	try {
		// 后端说 只增不减
		// !!result.ossId && (await ossDelete(result.ossId))
	} catch {}
}
</script>

<style scoped></style>
